import React, { useContext } from "react";
import "./index.css";
import { App1Context } from "../../App";
export default function Footer() {
  const { todoList, setTodoList } = useContext(App1Context);
  //计算已完成的个数
  const completed = () => {
    return todoList.reduce((p, c) => (c.done ? p + 1 : p), 0);
  };

  // 全选逻辑
  const selectAll = (e) => {
    const expChecked = e.target.checked;

    const newTodoList = todoList.map((item) => {
      return { ...item, done: expChecked };
    });
    setTodoList(newTodoList);
  };
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          onChange={selectAll}
          checked={completed() === todoList.length && todoList.length !== 0}
        />
      </label>
      <span>
        <span>已完成{completed()}</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick={()=>{setTodoList(todoList.filter(item => !item.done))}}>清除已完成任务</button>
    </div>
  );
}
